<template>
  <custom-modal
    ref="createModal"
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="$t('releaseNote')"
    :destroyOnClose="true"
    :attrs="{ dialogClass: 'ecuUpdateDetailDialog' }"
    :bodyStyle="{ height }"
    @cancel="handleCancel"
  >
    <template #title>
      <span>{{ $t('partUpdateDetail') }}</span>
      <i
        class="iconfont  switchLayout"
        :class="{'icon-liebiaoshitu1':compName === 'RichShow','icon-fuhao-dagangshu':compName === 'TableShow'}"
        @click="changeShowMode"></i>
    </template>
    <template #footer>
      <a-button type="primary" @click.stop="() => { visible = false }">{{ $t('back') }}</a-button>
    </template>
    <div
      class="ecuUpdateDetailContWrap"
      :style="{ height: '100%',padding: compName === 'TableShow' ? '20px 24px' : '' }">
      <component
        :is="compName"
        :query="query"
        :time="time"
        :ecu-lists="ecuLists"
        :loading-base-info="loadingBaseInfoData"
      ></component>
    </div>
  </custom-modal>
</template>
<script>
import DialogCont from './index.vue'
import RichShow from './richShow.vue'
import TableShow from './tableShow.vue'
import taskApi from '@/api/modules/task'
import CustomModal from '@/components/CustomModal/index.vue'
export default {
  components: {
    DialogCont,
    RichShow,
    TableShow,
    CustomModal
  },
  props: {
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: 'auto'
    },
    // 查询条件
    query: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      visible: false,
      submitDisabled: true,
      compName: 'RichShow',
      ecuLists: [],
      loadingBaseInfoData: false,
      time: 1587425
    }
  },
  watch: {
    query: {
      handler (val) {
        if (!val) {
          this.ecuLists = []
          return
        }
        this.compName = 'RichShow'
        this.getEcuBaseInfoData()
      },
      immediate: true
    }
  },
  methods: {
    handleCancel () {
      this.visible = false
    },
    switchVisible (val) {
      this.visible = val
    },
    changeShowMode () {
      this.compName = this.compName === 'RichShow' ? 'TableShow' : 'RichShow'
    },
    // 获取当前任务下的所有零件信息,不包括N次升级信息
    getEcuBaseInfoData () {
      this.loadingBaseInfoData = true
      this.ecuLists = []
      taskApi.getTaskVehicleEcuList(this.query).then(res => {
        this.ecuLists = res.data
        this.time = Date.now()
      }).finally(() => {
        this.loadingBaseInfoData = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ecuUpdateDetailDialog {
  .switchLayout {
    margin-left: 10px;
    cursor: pointer;
  }
  .ecuUpdateDetailContWrap {
    // border-top: 1px solid @borderColor;
    // border-bottom: 1px solid @borderColor;
    overflow: auto;
  }
}
</style>
<style lang="less">
.ecuUpdateDetailDialog {
  .ant-modal-body {
    padding: 0;
  }
}
</style>
